// 资料汇总
<template>
    <div class="add">
        <el-tabs v-model="activeName">
            <el-tab-pane name="first">
                <span slot="label"><i class="el-icon-circle-plus"></i>教学日历</span>
                <el-table
                        :data="tableData"
                        style="width: 100%" :type=index>
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-descriptions title="教学日历" :column="4" border>
                                    <el-descriptions-item label="院（部）" :span="2">{{ props.row.college }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="系（教研室）" :span="2">{{ props.row.researchRoom }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="课程编号" :span="2">{{ props.row.courseId }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="课程名" :span="2">{{ props.row.courseName }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="授课班级" :span="4">{{ props.row.classId }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="理教周数" :span="2">{{ props.row.weekOfTheory }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="姓名" :span="2">{{ props.row.teaName }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="讲课时数" :span="2">{{ props.row.timeOfTheory }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="职称" :span="2">{{ props.row.title }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="实验/上机时数" :span="2">{{ props.row.timeOfComputer }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="编号" :span="2">{{ props.row.userName }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="习题课时数" :span="2">{{ props.row.timeOfPractical }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="辅导教师" :span="2">{{ props.row.coachTeacher }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="共计" :span="2">{{ props.row.timeOfAll
                                        }}/{{props.row.credit}}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="学生人数" :span="2">{{ props.row.studentNum }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="课程属性" :span="2">{{ props.row.courseNature }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="考试类型" :span="2">{{ props.row.testType }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="系（教研室）负责人" :span="2">{{ " " }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="院（部）负责人" :span="2">{{ " " }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="考核方式" :span="1">{{ props.row.assessmentWay }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="期末考试占比" :span="1">{{props.row.examProportion}}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="平时考核主要项目及其占比" :span="3">
                                        平时作业：{{props.row.homeworkProportion}} 阶段性测验：{{props.row.testProportion}}
                                        实验：{{props.row.labProportion}} 小论文或综合作业：{{props.row.paperProportion}}
                                        课堂表现：{{props.row.attendanceProportion}}
                                        课堂讨论和提问：{{props.row.performanceProportion}} 其他方式：{{props.row.otherProportion}}
                                        合计：{{props.row.totalProportion}}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="使用教材" :span="4">{{ props.row.textBook }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="参考书目" :span="4">{{ props.row.referenceBook }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="备注" :span="4">{{ " " }}
                                    </el-descriptions-item>
                                </el-descriptions>
                                <el-table
                                        :data="props.row.timetableList"
                                        border
                                        style="width: 100%">
                                    <el-table-column
                                            prop="realTime"
                                            label="月日">
                                    </el-table-column>
                                    <el-table-column
                                            prop="weekNum"
                                            label="周次">
                                    </el-table-column>
                                    <el-table-column
                                            prop="teachOrder"
                                            label="授课顺序">
                                    </el-table-column>
                                    <el-table-column
                                            prop="content"
                                            label="授课内容">
                                    </el-table-column>
                                    <el-table-column
                                            prop="period"
                                            label="学时数">
                                    </el-table-column>
                                    <el-table-column
                                            prop="schedule"
                                            label="作业或实验/时间安排">
                                    </el-table-column>

                                </el-table>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="课程ID"
                            prop="courseId">
                    </el-table-column>
                    <el-table-column
                            label="课程名"
                            prop="courseName">
                    </el-table-column>
                    <el-table-column
                            label="授课班级"
                            prop="classId">
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-button type="warning" icon="el-icon-upload2" @click="exportData(scope.row)">导出
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane name="second">
                <span slot="label"><i class="iconfont icon-daoru-tianchong"></i>其他资料</span>
                {{"待完善"}}
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                user: null,
                index: '0',
                activeName: 'first',  //活动选项卡
                tableData: [{
                    "college": null,
                    "researchRoom": null,
                    "courseId": null,
                    "courseName": null,
                    "classId": null,
                    "weekOfTheory": null,
                    "timeOfTheory": null,
                    "timeOfComputer": null,
                    "timeOfPractical": null,
                    "timeOfAll": 0,
                    "credit": 0,
                    "studentNum": 0,
                    "courseNature": null,
                    "testType": null,
                    "teaName": null,
                    "title": null,
                    "userName": null,
                    "assessmentWay": null,
                    "examProportion": null,
                    "homeworkProportion": null,
                    "testProportion": null,
                    "labProportion": null,
                    "paperProportion": null,
                    "attendanceProportion": null,
                    "performanceProportion": null,
                    "otherProportion": null,
                    "totalProportion": null,
                    "coachTeacher": null,
                    "textBook": null,
                    "referenceBook": null,
                    "id": null,
                    "timetableList": [{
                        "id": 0,
                        "realTime": null,
                        "content": null,
                        "schedule": null,
                        "distributionId": 0,
                        "weekNum": 0,
                        "teachOrder": 0,
                        "period": 0
                    },]
                }],
                calendarRequest: {
                    id: null,
                    username: null,
                },
            };
        },
        created() {
            this.user = JSON.parse(window.sessionStorage.getItem('user'));
            this.select();
        },
        methods: {
            create() {
                this.$message("正在研发");
            },
            exportData(row) {
                this.downloadRequest('/calendar/exportCalendar?id=' + row.id + '&username=' + this.user.username);
            },
            select() {
                this.calendarRequest.username = this.user.username;
                this.postRequest('/calendar/selectCalendar/1/9999', this.calendarRequest).then(resp => {
                    if (resp) {
                        this.tableData = resp.data.records;
                    }
                })
            },
        }
    };
</script>

<style lang="scss" scoped>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

    .add {
        margin: 0px 40px;

        .box {
            padding: 0px 20px;

            ul li {
                margin: 10px 0px;
                display: flex;
                align-items: center;

                .el-input {
                    width: 6%;
                }

                .w150 {
                    margin-left: 20px;
                    width: 7%;
                }
            }
        }

        .el-icon-circle-plus {
            margin-right: 10px;
        }

        .icon-daoru-tianchong {
            margin-right: 10px;
        }

        .append {
            margin: 0px 20px;

            ul {
                display: flex;
                align-items: center;

                li {
                    margin-right: 20px;
                }
            }

            .change {
                margin-top: 20px;
                padding: 20px 16px;
                background-color: #E7F6F6;
                border-radius: 4px;

                .title {
                    padding-left: 6px;
                    color: #2f4f4f;

                    span:nth-child(1) {
                        margin-right: 6px;
                    }

                    .answer {
                        margin: 20px 0px 20px 8px;
                    }

                    .el-textarea {
                        width: 98% !important;
                    }
                }

                .options {
                    ul {
                        display: flex;
                        flex-direction: column;
                    }

                    ul li {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 98%;
                        margin: 10px 0px;

                        span {
                            margin-right: 20px;
                        }
                    }
                }

                .submit {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }

            .fill {
                .fillAnswer {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    span {
                        margin-right: 6px;
                    }

                    .el-input {
                        width: 91% !important;
                    }
                }

                .analysis {
                    margin-top: 20px;
                    margin-left: 5px;
                }
            }

            .judge {
                .judgeAnswer {
                    margin-left: 20px;
                    margin-bottom: 20px;
                }
            }

            .w150 {
                width: 150px;
            }

            li:nth-child(2) {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
</style>





